<template>
  <section class='container'>
  
    <FormItem :form-items="formItem" @enter-key="handleQuery" @button-click="handleButtonClick" />
    <Table :columns="tableColumns" :data="data" />
    <Dialog 
      :model-value="dialogVisible"
      :title="dialogTitle"
      :form-fields="formFields"
      @update:model-value="dialogVisible = $event"
      @submit="handleFormSubmit"
    />
  </section>
</template>

<script lang='ts' setup>
import FormItem from '~/components/FormItem.vue';
import Table from '~/components/Table.vue';
import Dialog from '~/components/Dialog.vue';
import {  business as formdata, businessColumns as tableColumns } from './data'
const options = ref<any[]>([]) // 投放渠道

const formItem = ref<any>([]) // 表单
const data = ref<any>([]) // 表格数据
  onMounted(async () => {
    formItem.value =  (formdata(options)) // 表单
    data.value = [
      {
        banner: 'http://editerupload.eepw.com.cn/fetch/202305/2e4540737c21a5a6a26efefde1014597.jpeg',
        name: '富宁县国有资本经营集团有限公司',
        title_cn: '地产类金融服务',
        title_en: 'REAL ESTATE CATEGORY',
        desc: '公司主要为国内房地产开发企业提供金融服务，与国内外大型银行、信托等金融机构进行深度合作，并运用创新性的金融模式，服务于地产金融生态链。',
        createTime: '2023-01-01 12:00:00',
        updateTime: '2023-01-01 12:00:00',
        createUser: '张三',
        updateUser: '李四',
        status: 1,
      },

    ]
})

const dialogVisible = ref(false);
const dialogTitle = '添加业务';
const formFields = [
  { name: 'name', label: '业务名称', type: 'input', props: { placeholder: '请输入' } },
  { name: 'title_cn', label: '业务标题-中文', type: 'input', props: { placeholder: '请输入' } },
  { name: 'title_en', label: '业务标题-英文', type: 'input', props: { placeholder: '请输入' } },
  { name: 'desc', label: '业务介绍', type: 'textarea', props: { placeholder: '请输入' } },
  // { name: 'country', label: '业务介绍', type: 'select', props: { options: [{label:'China',value:'China'},{label:'USA',value:'USA'}] } },
  { name: 'banner', label: '图片', type: 'upload', props: { action: 'https://jsonplaceholder.typicode.com/posts/' } },

];

const openDialog = () => {
  dialogVisible.value = true;
};

const handleFormSubmit = async (formData: any) => {
  console.log(formData)
  try {
    // 组装表单数据
    const formPayload = { ...formData };

    // 调用API提交表单数据
    // const response = await submitFormData(formPayload);

    // 处理成功响应
    // showNotification('表单提交成功');
  } catch (error) {
    // 处理错误
    // showNotification('表单提交失败');
  }
};
const handleQuery = () => {
  console.log('query')
}
const handleButtonClick = (type: string, params: any, item?: any) => {
  // 按钮点击事件
  openDialog()
  console.log('您点击了', type, params, item)
}
</script>

<style scoped lang='stylus'>
.container{ 
  padding 20px
}
</style>